﻿html,body{position: relative;height:100%;margin:0;padding:0;}

.box1{min-width: 320px;max-width: 640px;height:100%;}

.tu1{
	width:100%;
	height:100%;
	background:url("../images/di-01.jpg")no-repeat;
	background-size: 100% 100%; 
}

.title{
	width:40.1%;
	height:9%;
	background:url("../images/mei2.png")no-repeat;
	background-size: 100% 100%; 
	position:absolute;
	top:-3%;
	left:30%;
	animation:title infinite;
	-moz-animation:title infinite; /* Firefox */
	-webkit-animation:title infinite; /* Safari and Chrome */
	-o-animation:title infinite;
}	
@-webkit-keyframes title{
	0%{opacity:0;}
	25%{opacity:1;}
	50%{opacity:0;}
	75%{opacity:1;}
	100%{opacity:0;}
}
.quanb{
	width:33.1%;
	height:3%;
	background:url("../images/mei1.png")no-repeat;
	background-size: 100% 100%; 
	position:absolute;
	top:0%;
	left:33.5%;
}	

.bzuo{
	width:19%;
	height:1.2%;
	background:url("../images/mei3.png")no-repeat;
	background-size: 100% 100%; 
	position:absolute;
	top:0.9%;
	left:41%;
}	





.dizi{
	-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
	width:46%;
	height:5%;
	/*border: 1px solid red;*/
	background:url("../images/fm10.png")no-repeat;
	background-size: 100% 100%; 
	position: absolute;
	left:27%;
	top:15%;
	animation:dizi;
	-moz-animation:dizi; /* Firefox */
	-webkit-animation:dizi; /* Safari and Chrome */
	-o-animation:dizi;
}	
@-webkit-keyframes dizi{
	0%{
	top:100%;
	}
	100%{
	top:15%;
	}
}
.huakuang{
	-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
	width:20%;
	height:1.6%;
	background:url("../images/fm6.png")no-repeat;
	background-size: 100% 100%; 
	position: absolute;
	left:22%;
	top:75.7%;
	animation:huakuang;
	-moz-animation:huakuang; /* Firefox */
	-webkit-animation:huakuang; /* Safari and Chrome */
	-o-animation:huakuang;
}	
@-webkit-keyframes huakuang{
	0%{left:-100%;
	}
	
	100%{left:22%;
	}
}
.heidian3{
-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
	width:20%;
	height:1.6%;
	background:url("../images/fm7.png")no-repeat;
	background-size: 100% 100%; 
	position: absolute;
	left:22%;
	top:78.9%;
	animation:huakuang;
	-moz-animation:huakuang; /* Firefox */
	-webkit-animation:huakuang; /* Safari and Chrome */
	-o-animation:huakuang;
}	

.heidian1{
	-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
	width:20%;
	height:2%;
	background:url("../images/fm8.png")no-repeat;
	background-size: 100% 100%; 
	position: absolute;
	left:22%;
	top:81.9%;
	animation:huakuang;
	-moz-animation:huakuang; /* Firefox */
	-webkit-animation:huakuang; /* Safari and Chrome */
	-o-animation:huakuang;
}
.zhizhen{
	-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
	width:20%;
	height:2%;
	background:url("../images/fm9.png")no-repeat;
	background-size: 100% 100%; 
	position: absolute;
	left:22%;
	top:84.9%;
	animation:zhizhen;
	-moz-animation:zhizhen; /* Firefox */
	-webkit-animation:zhizhen; /* Safari and Chrome */
	-o-animation:zhizhen;
}	
@-webkit-keyframes zhizhen{
	0%{left:-100%;
	}
	
	100%{left:22%;
	}
}





.heidian2{
	-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
	width:62%;
	height:3%;
	background:url("../images/fm11.png")no-repeat;
	background-size: 100% 100%; 
	position: absolute;
	left:17%;
	top:23%;
	animation:heidian2;
	-moz-animation:heidian2; /* Firefox */
	-webkit-animation:heidian2; /* Safari and Chrome */
	-o-animation:heidian2;
}	
@-webkit-keyframes heidian2{
	0%{
	top:-100%;
	}
	
	100%{
	top:23%;
	}
}
.tu2{
	width:100%;
	height:100%;
	background:url("../images/di-02.jpg")no-repeat;
	background-size: 100% 100%; 
}
.xianfang{
	width:13.2%;
	height:7.4%;
	background:url("../images/diqiu.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:6%;
    left: 73%; 
    
    animation:xianfang infinite linear;
	-moz-animation:xianfang infinite linear; /* Firefox */
	-webkit-animation:xianfang infinite linear; /* Safari and Chrome */
	-o-animation:xianfang infinite linear;
}	
@-webkit-keyframes xianfang{
	form{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}
.p2zi{
	width:20%;
	height:7.8%;
	background:url("../images/yinwen.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:6%;
	left:16%;
	animation:p2zi;
	-moz-animation:p2zi; /* Firefox */
	-webkit-animation:p2zi; /* Safari and Chrome */
	-o-animation:p2zi;
}
@-webkit-keyframes p2zi{
	0%{
		left:-100%;
	}
	100%{
		left:16%;
	}
}
.dhua{
	width:38.7%;
	height:26%;
	background:url("../images/kuang 1.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:70%;
    left:15%; 
	animation:dhua;
	-moz-animation:dhua; /* Firefox */
	-webkit-animation:dhua; /* Safari and Chrome */
	-o-animation:dhua;
	
}	
@-webkit-keyframes dhua{
	0%{
	transform:rotateY(180deg);
	}

	100%{
	transform:rotateY(0deg);
	}
}
.tubiao{
	width:30%;
	height:4%;
	background:url("../images/ico.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:92%;
    left:59%; 
    animation:title infinite;
	-moz-animation:title infinite; /* Firefox */
	-webkit-animation:title infinite; /* Safari and Chrome */
	-o-animation:title infinite;
}







.tu3{
	width:100%;
	height:100%;
	background:url("../images/di-03.jpg") no-repeat;
	background-size: 100% 100%;
}
.fanhua{
	width:40.1%;
	height:9%;
	background:url("../images/mei2.png")no-repeat;
	background-size: 100% 100%; 
	position:absolute;
	bottom:-3%;
	left:30%;
	animation:title infinite;
	-moz-animation:title infinite; /* Firefox */
	-webkit-animation:title infinite; /* Safari and Chrome */
	-o-animation:title infinite;
	transform:rotate(180deg);
}
.leftboy{
	width:33.1%;
	height:3%;
	background:url("../images/mei1.png")no-repeat;
	background-size: 100% 100%; 
	position:absolute;
	bottom:0%;
	left:33.5%;
	transform:rotate(180deg);
}
.rightboy{
	width:19%;
	height:1.2%;
	background:url("../images/mei3.png")no-repeat;
	background-size: 100% 100%; 
	position:absolute;
	bottom:0.9%;
	left:41%;
}

.nice{
	width:13.2%;
	height:7.4%;
	background:url("../images/diqiu.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:44%;
    left: 16%; 
    animation:xianfang infinite linear;
	-moz-animation:xianfang infinite linear; 
	-webkit-animation:xianfang infinite linear; 
	-o-animation:xianfang infinite linear;
}	
.lantu{
	width:37.7%;
	height:35%;
	background:url("../images/kuang 2.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:19%;
    left:50%; 
	animation:dhua;
	-moz-animation:dhua; /* Firefox */
	-webkit-animation:dhua; /* Safari and Chrome */
	-o-animation:dhua;
	
}	
.cflo{
	width:20%;
	height:7.8%;
	background:url("../images/yinwen.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:46%;
	left:16%;
	animation:p2zi;
	-moz-animation:p2zi; /* Firefox */
	-webkit-animation:p2zi; /* Safari and Chrome */
	-o-animation:p2zi;
}




.tu4{
	width:100%;
	height:100%;
	background:url("../images/di-04.jpg") no-repeat;
	background-size: 100% 100%;
}

.p4-4{
	width:40%;
	height:50%;
	background:url("../images/kuang 3.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	bottom:0%;
    left:31%; 
	animation:dhua;
	-moz-animation:dhua; /* Firefox */
	-webkit-animation:dhua; /* Safari and Chrome */
	-o-animation:dhua
}	

.tu5{
	width:100%;
	height:100%;
	background:url("../images/di-05.jpg") no-repeat;
	background-size: 100% 100%;
}

.p5zhong{
	width:37.7%;
	height:35%;
	background:url("../images/kuang 4.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:19%;
    left:50%; 
	animation:dhua;
	-moz-animation:dhua; /* Firefox */
	-webkit-animation:dhua; /* Safari and Chrome */
	-o-animation:dhua;
}

.tu6{
	width:100%;
	height:100%;
	background:url("../images/di-06.jpg") no-repeat;
	background-size: 100% 100%;
}
.tu6lan{
	width:38.7%;
	height:35%;
	background:url("../images/kuang 6.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:19%;
    left:49%; 
	animation:dhua;
	-moz-animation:dhua; 
	-webkit-animation:dhua; 
	-o-animation:dhua;
	
}

.p6ditu{
	width:49%;
	height:26%;
	/*background:url("../images/zi.png")no-repeat;*/
	background-size: 100% 100%;
	position: absolute;
	top:17%;
    left: 19%; 
    animation:p2ditu;
	-moz-animation:p2ditu; /* Firefox */
	-webkit-animation:p2ditu; /* Safari and Chrome */
	-o-animation:p2ditu;
}
.xianfang2{
	width:13.2%;
	height:7.4%;
	background:url("../images/diqiu.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:47%;
    left: 18%; 
    
    animation:xianfang infinite linear;
	-moz-animation:xianfang infinite linear; /* Firefox */
	-webkit-animation:xianfang infinite linear; /* Safari and Chrome */
	-o-animation:xianfang infinite linear;
}
.yuzai{
	width:88%;
	height:36%;
	background:url("../images/yuzai.jpg")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:56%;
    left: 7%; 
    animation:yuzai;
	-moz-animation:yuzai; /* Firefox */
	-webkit-animation:yuzai; /* Safari and Chrome */
	-o-animation:yuzai;
}	
@-webkit-keyframes yuzai{
	0%{
		top:100%;
	}
	100%{
		top:56%;
	}
}
.tu7{
	width:100%;
	height:100%;
	background:url("../images/di-07.jpg") no-repeat;
	background-size: 100% 100%;
}


.yyan{
	width:15%;
	height:9%;
	background:url("../images/yyan.png")no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:2%;
    right:2%; 
	animation:yyan infinite linear;
	-moz-animation:yyan infinite linear;
	-webkit-animation:yyan infinite linear; 
	-o-animation:yyan infinite linear;
}
@-webkit-keyframes yyan{
	form{transform:rotate(0deg);}
	to{transform:rotate(360deg);}
}
.erweima{
	width:25%;
	height:14%;
	position: absolute;
	background-size:100% 100%;
	top:50%;
	left:38%;
}
.erweima img{
	width:100%;
	height:100%;
	background-size:100% 100%;

}
